﻿<link rel="stylesheet" type="text/css" href="../../Content/jquery-ui-1.9.1.custom.css" />
<link rel="stylesheet" type="text/css" href="../../Content/home-style.css" />
<script src="../../Scripts/jquery-1.8.2.js"></script>
<script src="../../Scripts/jquery-ui-1.9.1.custom.js"></script>
<script type="text/javascript">
    function Approval(isAprove, token) {
        var requestURL = 'http://localhost:53220/api/OAuth?isApproved=' + isAprove + "&oauth_token=" + token + "&userName=" +$('#edit-name').val() ;
        $.ajax({
            url: requestURL,
            type: 'GET',
            success: function (data) {
                alert(data);
                var referLink = document.createElement('a');
                referLink.href = data + "&UserName="+$('#edit-name').val();
                document.body.appendChild(referLink);
                referLink.click();
            }
        });
        };      
        
        
          //Dang nhap thanh cong, hien thi giao dien
	    function ShowMainGui() {
	        $('#login').hide().css({ 'left': '0px' });
	        $('#Login_form').hide().css({ 'top': '0px' });
	        $('#profile').css('opacity', '1');
	        $('#select').button({ icons: { primary: "ui-icon-triangle-1-s"} });
	        $('#log').hide();
            $('#Concept').show();
	    };
         
    var height = screen.height;
	var width = screen.width;
    $(document).ready( function(){  
            $('#loginButton').button();      
            $('#loginButton').css("right",width/2 + 30);
            $('#Login_form').css("right", width / 2 - 140);
            $('#profile').css('opacity','0');            
             $('#loginButton').click(function() {
				$('#submit').hide().css({'left' : '0px'});
				
				$('#login').show().animate({
				
					left   : width/2 + 160,
					
				},400,function(){
					
					$('#login').css({'-webkit-transform' : 'rotate(-0deg)','-moz-transform' : 'rotate(-0deg)' });
				
				});
				///
				$('#Login_form').show().animate({
			
					top   : '100px',
					
				},700,function(){
					
					//$('#image').css({'-webkit-transform' : 'rotate(-90deg)','-moz-transform' : 'rotate(-90deg)' });
				});
			});

            $("#login").click(function () {
	        var username = $('#edit-name').val();
	        var pass = $('#edit-pass').val();	       
	        if ($('#typeChat option:selected').text() == 'Ajax chat') {
	            var requestURL = "http://localhost:53220/api/Account?username=" + username + "&pass=" + pass;
	            $.getJSON(requestURL, function (data) {
	                if (data != null) {
	                    $('#select').text($('#edit-name').val());	 
                        ShowMainGui();                  
	                }
	                else {
	                    alert("Account is invalid!");
	                }
	            }).fail(function (jqXHR, textStatus, err) {
			    alert('Error ' + err);
			    });
            }
            });	        
    });
</script>
@{
    ViewBag.Title = "GetAuthor";
    String request = ViewBag.RequestToken as String;
}
<div id="log">
    <button id="loginButton">
        Login</button>
    <img src="../../Content/img/result.png" id="login" />
    <img src="../../Content/img/submit.png" id="submit" />
    <div class="loginform" id="Login_form">
        <form method="post" action="#">
        <div>
            <div class="form-item">
                <label for="edit-name">
                    Username:</label>
                <input type="text" class="form-text required" value="" size="15" id="edit-name" name="name"
                    maxlength="25">
            </div>
            <div class="form-item">
                <label for="edit-pass">
                    Password:</label>
                <input type="password" class="form-text required" size="15" maxlength="25" id="edit-pass"
                    name="pass">
            </div>
        </div>
        </form>
    </div>
</div>
<div id="header">
    <div id="profile">
        <button id="select">
            TEST</button>
    </div>
</div>
<select id="typeChat" style="float: right; display: none; position: absolute;">
    <option value="">Ajax chat</option>
    <option value="7">Yahoo chat</option>
    <option value="10">OpenID Login</option>
</select>
<div id="Concept" style="display: none">
    <h2>
        Bạn có đồng ý các điều khoản dưới đây</h2>
    <p>
        Cho phép truy cập thông tin cá nhân</p>
    <p>
        Cho phép thực hiện các thao tác chat</p>
    <p>
        RequestToken: @request</p>
    <button id="aprovalButton" style="display:inline-block" onclick ="Approval('true','@request');">
        Approval</button>
    <button id="deniedButton" style="display:inline-block" onclick="Approval('false','@request');">
        Denied</button>
</div>
